<template>
  <div class="tool-mid-box-left">
    <template v-for="item in descriptions.applianceName">
      <template v-if="item.show">
        <template v-if="item.hasColor">
          <el-popover
            placement="right"
            trigger="click"
            :key="item.values"
            @click="onVisibleChange(extendsPanel)"
          >
            <template v-if="item.hasColor">
              <tool-box-palette-box
                :room="roomData"
                :roomState="roomState"
                :displayStroke="item.hasStroke"
              ></tool-box-palette-box>
            </template>
            <el-tooltip placement="right" :content="item.title" slot="reference">
              <div class="tool-box-cell-box-left">
                <div
                  class="tool-box-cell"
                  @click.prevent="event => clickAppliance(event, item.name)"
                >
                  <img
                    @click="changeIcon(item.name)"
                    :src="isSelected === item.name ? item.iconActive : item.icon"
                  />
                </div>
              </div>
            </el-tooltip>
          </el-popover>
        </template>
        <template v-else>
          <el-tooltip :key="item.values" placement="right" :content="item.title" slot="reference">
            <div class="tool-box-cell-box-left">
              <div class="tool-box-cell" @click.prevent="event => clickAppliance(event, item.name)">
                <img
                  @click="changeIcon(item.name)"
                  :src="isSelected === item.name ? item.iconActive : item.icon"
                />
              </div>
            </div>
          </el-tooltip>
        </template>
      </template>
    </template>
    <slot></slot>
  </div>
</template>

<script>
import ToolBoxPaletteBox from './ToolBoxPaletteBox'
import selector from './src/image/selector.svg'
import selectorActive from './src/image/selector-active.svg'
import pen from './src/image/pencil.svg'
import penActive from './src/image/pencil-active.svg'
import text from './src/image/text.svg'
import textActive from './src/image/text-active.svg'
import eraser from './src/image/eraser.svg'
import eraserActive from './src/image/eraser-active.svg'
import ellipse from './src/image/ellipse.svg'
import ellipseActive from './src/image/ellipse-active.svg'
import rectangle from './src/image/rectangle.svg'
import rectangleActive from './src/image/rectangle-active.svg'
import straight from './src/image/straight.svg'
import straightActive from './src/image/straight-active.svg'
import arrow from './src/image/arrow.svg'
import arrowActive from './src/image/arrow-active.svg'
import laserPointer from './src/image/laserPointer.svg'
import laserPointerActive from './src/image/laserPointer-active.svg'
import hand from './src/image/hand.svg'
import handActive from './src/image/hand-active.svg'
import mask from './src/image/mask.svg'
export default {
  name: 'ToolBox',
  components: {
    ToolBoxPaletteBox
  },
  props: {
    room: {
      type: Object,
      require: true
    },
    drawable: {
      type: String
    }
  },
  data() {
    return {
      selector,
      selectorActive,
      pen,
      penActive,
      text,
      textActive,
      eraser,
      eraserActive,
      ellipse,
      ellipseActive,
      rectangle,
      rectangleActive,
      straight,
      straightActive,
      arrow,
      arrowActive,
      laserPointer,
      laserPointerActive,
      hand,
      handActive,
      mask,
      strokeEnable: false,
      extendsPanel: false,
      roomData: this.room,
      roomState: this.room.state,
      isSelected: this.room.state.memberState.currentApplianceName,
      descriptions: {
        applianceName: Object.freeze({
          selector: Object.freeze({
            name: 'selector',
            title: '鼠标选择器',
            icon: selector,
            iconActive: selectorActive,
            hasStroke: false,
            show: true
          }),
          pencil: Object.freeze({
            name: 'pencil',
            title: '画笔',
            icon: pen,
            iconActive: penActive,
            hasColor: true,
            hasStroke: true,
            show: true
          }),
          text: Object.freeze({
            name: 'text',
            title: '文字',
            icon: text,
            iconActive: textActive,
            hasColor: false,
            hasStroke: false,
            show: true
          }),
          eraser: Object.freeze({
            name: 'eraser',
            title: '橡皮擦',
            icon: eraser,
            iconActive: eraserActive,
            hasColor: false,
            hasStroke: false,
            show: true
          }),
          ellipse: Object.freeze({
            name: 'ellipse',
            title: '椭圆',
            icon: ellipse,
            iconActive: ellipseActive,
            hasColor: true,
            hasStroke: true,
            show: true
          }),
          rectangle: Object.freeze({
            name: 'rectangle',
            title: '矩形',
            icon: rectangle,
            iconActive: rectangleActive,
            hasColor: true,
            hasStroke: true,
            show: true
          }),
          straight: Object.freeze({
            name: 'straight',
            title: '直线',
            icon: straight,
            iconActive: straightActive,
            hasColor: true,
            hasStroke: true,
            show: true
          }),
          arrow: Object.freeze({
            name: 'arrow',
            title: '箭头',
            icon: arrow,
            iconActive: arrowActive,
            hasColor: true,
            hasStroke: true,
            show: true
          }),
          laserPointer: Object.freeze({
            name: 'laserPointer',
            title: '激光笔',
            icon: laserPointer,
            iconActive: laserPointerActive,
            hasStroke: false,
            show: true
          }),
          hand: Object.freeze({
            name: 'hand',
            title: '手抓工具',
            icon: hand,
            iconActive: handActive,
            hasStroke: false,
            show: true
          })
        })
      }
    }
  },

  methods: {
    changeIcon(value) {
      this.isSelected = value
    },

    clickAppliance(eventTarget, applianceName) {
      this.room.setMemberState({ currentApplianceName: applianceName })
      this.extendsPanel = true
    },

    onVisibleChange(visible) {
      if (!visible) {
        this.extendsPanel = false
      }
    }
  },

  mounted() {
    this.room.callbacks.on('onRoomStateChanged', modifyState => {
      this.roomState = { ...this.room.state, ...modifyState }
    })
  }
}
</script>

<style lang="scss">
@import './ToolBox.scss';
</style>
